<template>
  <div>
    <div class="search-block" v-if="showsearch">
      <searchtab @searchopen="opensearch" @checkstab="goindex" @linksearch="searchlink" :tablist="tablistprop"></searchtab>
    </div>
    <div class="search-block-new" v-if="showsearchlist">
      <searchlist @cansearch="searchcan" :searchprop="searchtext"></searchlist>
    </div>
    <div class="detail-top-tab pc-bk" >
      <navblock></navblock>
    </div>
    <div class="login-bloock" v-if="showlogin">
      <loginpop @bindlogin="loginbloock"></loginpop>
    </div>
    <div class="top-content-block" >
      <div class="breadcrumb-bk pc-bk" style="display: none;">
        <span class="breadcrumb-ele" @click="selectab">{{detailData.detail.first_level_cname}}</span><span class="breadcrumb-ele-righticon"> > </span>
        <span class="breadcrumb-ele" @click="moreBtn" :data-id="detailData.detail.second_level_cid">{{detailData.detail.second_level_cname}}</span><span class="breadcrumb-ele-righticon"> > </span>
        <span class="breadcrumb-ele-title">{{detailData.detail.title}}</span>
      </div>
      <div class="left-nav pc-bk" ref="leftnav" v-bind:class="{'scroll':scrolldetail === 1, 'fbottom':fixedbottom === 1}" >
        <div class="detail-search">
          <input type="text" v-model="searchtext" placeholder="全站搜索 Search" @keyup.enter="searchBtn1">
          <img src="../../img/mobile/search_new.png"  @click="searchBtn1">
        </div>
        <div class="side-header hy detail">
          <span class="sidle-text">{{detailData.nav_title}}</span>
          <span class="sidle-icon"><img src="../../img/mobile/side-header-hy.jpg"></span>
        </div>
        <div class="meeting-list detail-sidle">
          <ul>
            <li  v-for="(meetlist, index) in tablist" v-if="meetlist.item_id !== 0"  v-bind:class="{'open': meetlist.is_selected === 1}" :data-id="tablist.length">
              <div class="detail-sidle-main" @click="moreBtn" :data-itid="meetlist.item_id" :data-id="meetlist.id" :data-type="meetlist.content_type">
                <span class="focus-icon">
                </span>
                <span class="focus-title-link">
                  {{meetlist.name}}
                </span>
              </div>
              <div class="open-sidle"  v-if="meetlist.children.length > 0">
                <div class="open-sidle-list" v-if="listchild.item_id !== 0" v-bind:class="{'active' : listchild.is_selected === 1}" @click="tomoreList" :data-itid="listchild.item_id" :data-tcid="listchild.third_level_cid" :data-id="listchild.id" :data-cid="listchild.parent_cid" :data-type="listchild.content_type" v-for="(listchild, childindex) in meetlist.children">
                  {{listchild.name}}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="news-body" v-bind:class="{'scroll':scrolldetail === 1}" v-if="detailData.detail.length !== 0">
        <div class="side-header hy-light pc-bk">
          <span class="sidle-text"><span @click="toIndex" v-if="detailData.detail.subject_id === 0" :data-id="detailData.detail.first_level_cid">{{detailData.detail.first_level_cname}}</span> <span @click="toTopic" :data-id="detailData.detail.subject_id" v-else>{{detailData.detail.first_level_cname}}</span> > <span @click="moreBtn" :data-id="detailData.detail.second_level_cid" data-type="" v-if="cid === ''">{{detailData.detail.second_level_cname}}</span><span @click="tootherList" :data-id="detailData.detail.second_level_cid" :data-cid="cid" :data-tid="tid" v-else>{{detailData.detail.second_level_cname}}</span> > {{detailData.detail.title}}</span>
        </div>
       <!--  <div v-if="detailData.detail.second_level_cname === 'SRIA 会员'">
          <div class="signup-content">
            <div class="signup-title">
              思路国际联盟会员申请表
            </div>
            <el-form ref="form" :model="form">
              <div class="application-cat">
                <div class="app-cat-title">
                  <span class="cat-title">申请会员类型</span>
                </div>
                <el-form-item>
                  <div class="application-type">
                      <el-checkbox-group v-model="form.type">
                        <div class="check-viptype" v-for="apptype in applicationType">
                          <el-checkbox :label="apptype.value" :value="apptype.key" name="type" ></el-checkbox>
                        </div>
                      </el-checkbox-group>
                      <div class="type-note">
                        注：战略伙伴仅限定向邀请，最终资格由理事会审议通过
                      </div>
                  </div>
                </el-form-item>
                <div class="app-cat-title">
                  <span class="cat-title">公司/社团申请人资料</span>
                </div>
                <el-form-item label="公司/社团名称（中英文）" label-width="175px">
                  <el-input v-model="form.company"></el-input>
                </el-form-item>
                <div>
                  <div class="input-username input-userinfo">
                    <el-form-item label="负责人姓名" label-width="100px">
                      <el-input v-model="form.username"></el-input>
                    </el-form-item>
                  </div>
                  <div class="input-userjob input-userinfo">
                    <el-form-item label="职务" label-width="50px">
                      <el-input v-model="form.userjob"></el-input>
                    </el-form-item>
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="app-cat-title">
                  <span class="cat-title">通讯资料</span>
                </div>
                <div class="input-content">
                  <div class="input-leftinfo input-info">
                    <el-form-item label="联系人" label-width="100px">
                      <el-input v-model="form.contacts"></el-input>
                    </el-form-item>
                  </div>
                  <div class="input-rightinfo input-info">
                    <el-form-item label="职务" label-width="100px">
                      <el-input v-model="form.contactjob"></el-input>
                    </el-form-item>
                  </div>
                  <div class="input-leftinfo input-info">
                    <el-form-item label="联系电话" label-width="100px">
                      <el-input v-model="form.contactphone"></el-input>
                    </el-form-item>
                  </div>
                  <div class="input-rightinfo input-info">
                    <el-form-item label="传真号码" label-width="100px">
                      <el-input v-model="form.contactfax"></el-input>
                    </el-form-item>
                  </div>
                  <div class="input-leftinfo input-info">
                    <el-form-item label="电子邮件" label-width="100px">
                      <el-input v-model="form.contactemail"></el-input>
                    </el-form-item>
                  </div>
                  <div class="input-rightinfo input-info">
                    <el-form-item label="官方网站" label-width="100px">
                      <el-input v-model="form.contactwww"></el-input>
                    </el-form-item>
                  </div>
                  <div class="clear"></div>
                </div>
                <el-form-item label="通讯地址" label-width="100px">
                  <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="100px" label-color="#B2813E">
                  <el-input v-model="form.note"></el-input>
                </el-form-item>
                <div class="submit-btn">
                  <el-form-item>
                    <el-button type="submission" @click="onSubmit">提交</el-button>
                    <el-button type="submission">返回专题首页</el-button>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
        </div> -->
        <!-- <div v-else-if="detailData.detail.second_level_cname === 'IFF 会员'">
          <div class="signup-content red-block">
            <div class="signup-title red-block">
              国际金融论坛会员申请表
            </div>
            <el-form ref="form" :model="form">
              <div class="application-cat">
                <div class="app-cat-title red-block">
                  <span class="cat-title">申请会员类型</span>
                </div>
                <el-form-item>
                  <div class="application-type">
                      <el-checkbox-group v-model="form.type">
                        <div class="check-viptype red-block" v-for="apptype in applicationType">
                          <el-checkbox :label="apptype.value" :value="apptype.key" name="type" ></el-checkbox>
                        </div>
                      </el-checkbox-group>
                      <div class="type-note">
                        注：战略伙伴仅限定向邀请，最终资格由理事会审议通过
                      </div>
                  </div>
                </el-form-item>
                <div class="app-cat-title red-block iff-input">
                  <span class="cat-title">公司/社团申请人资料</span>
                </div>
                <div class="input-iff-content iff-input-bk iff-company">
                  <el-form-item label="公司/社团名称（中英文）" label-width="175px">
                    <el-input v-model="form.company"></el-input>
                  </el-form-item>
                </div>
                <div class="input-iff-content">
                  <div class="left-iff-input">
                    <el-form-item label="负责人姓名" label-width="85px">
                      <el-input v-model="form.username"></el-input>
                    </el-form-item>
                  </div>
                  <div class="right-iff-input">
                    <el-form-item label="职务" label-width="50px">
                      <el-input v-model="form.userjob"></el-input>
                    </el-form-item>
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="app-cat-title red-block iff-input">
                  <span class="cat-title">通讯资料</span>
                </div>
                <div class="input-iff-content">
                  <div class="left-iff-input">
                    <el-form-item label="联系人" label-width="60px">
                      <el-input v-model="form.contacts"></el-input>
                    </el-form-item>
                  </div>
                  <div class="right-iff-input">
                    <el-form-item label="职务" label-width="50px">
                      <el-input v-model="form.contactjob"></el-input>
                    </el-form-item>
                  </div>
                  <div class="left-iff-input">
                    <el-form-item label="联系电话" label-width="85px">
                      <el-input v-model="form.contactphone"></el-input>
                    </el-form-item>
                  </div>
                  <div class="right-iff-input">
                    <el-form-item label="传真号码" label-width="85px">
                      <el-input v-model="form.contactfax"></el-input>
                    </el-form-item>
                  </div>
                  <div class="left-iff-input">
                    <el-form-item label="电子邮件" label-width="85px">
                      <el-input v-model="form.contactemail"></el-input>
                    </el-form-item>
                  </div>
                  <div class="right-iff-input">
                    <el-form-item label="官方网站" label-width="85px">
                      <el-input v-model="form.contactwww"></el-input>
                    </el-form-item>
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="input-iff-content iff-input-bk">
                  <el-form-item label="通讯地址" label-width="85px">
                    <el-input v-model="form.address"></el-input>
                  </el-form-item>
                </div>
                <div class="input-iff-content iff-input-bk">
                  <el-form-item label="备注" label-width="50px" label-color="#B2813E">
                    <el-input v-model="form.note"></el-input>
                  </el-form-item>
                </div>
                <div class="submit-btn">
                  <el-form-item>
                    <el-button type="submission" @click="onSubmit">提交</el-button>
                    <el-button type="submission">返回专题首页</el-button>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
        </div> -->
        <div>
          <div class="news-content" v-if="detailData.detail.type === 1"><!--视频-->
            <div class="video-show">
              <video-player  class="video-player vjs-custom-skin"
                             ref="videoPlayer"
                             :playsinline="true"
                             :options="playerOptions"
                             @ready="playerReadied($event)"
              >
              </video-player>
            </div>
            <div class="news-detail-header">
              <div class="news-title">
                {{detailData.detail.title}}
              </div>
              <div class="news-video-content">
                <div>{{detailData.detail.note}}</div>
              </div>
              <div class="content-info">
                <span class="author">作者：{{detailData.detail.author}}</span>
                <span class="author">来源：{{detailData.detail.source}}</span>
                <span class="publish-time">发布时间：{{detailData.detail.publish_time}}</span>
                <span class="view-num">浏览次数：{{detailData.detail.views}}</span>
                <div class="share-detail">
                  <!--<span><img src="../../img/mobile/like.png"></span>-->
                  <span v-if="likenew !== 1" @click="likeNews"><img src="../../img/mobile/shareicon.png"></span>
                  <span v-else @click="hasLike"><img src="../../img/mobile/shareicon1.png"></span>
                </div>
              </div>
            </div>
          </div>
          <!--预留下载中心-->
          <div class="news-content" v-else><!--新闻-->
            <div class="news-detail-header">
              <div class="news-title">
                {{detailData.detail.title}}
              </div>
              <!--<div class="news-detail-banner pc-bk" :style="{backgroundImage:'url(' + detailData.detail.cover_path + ')'}">-->
              <!--</div>-->
              <div class="content-info info-detail mobile-top">
                <span>{{detailData.detail.author}}</span>{{detailData.detail.publish_time}}
              </div>
              <div class="content-info info-detail pc-bk">
                <span class="author">作者：{{detailData.detail.author}}</span>
                <span class="author">来源：{{detailData.detail.source}}</span>
                <span class="publish-time">发布时间：{{detailData.detail.publish_time}}</span>
                <!--<span class="view-num">浏览次数：{{detailData.detail.views}}</span>-->
                <div class="share-detail">
                  <!--<span><img src="../../img/mobile/like.png"></span>-->
                  <span v-if="likenew !== 1" @click="likeNews"><img src="../../img/mobile/shareicon.png"></span>
                  <span v-else @click="hasLike"><img src="../../img/mobile/shareicon1.png"></span>
                </div>
              </div>
            </div>
            <div class="news-detail-content pc-bk ql-editor">
              <div v-html="detailData.detail.content"></div>
            </div>
            <div class="news-detail-content mobile-top detail">
              <div v-html="detailData.detail.content" :class="{ showmore: isActive }"></div>
            </div>
            <div class="see-more-btn mobile-top"  @click="lookMore" v-if="isActive">
              <span>查看更多</span>
            </div>
          </div>
          <!-- <div class="article-detail-share pc-bk">
            <img src="../../img/mobile/at-share-icon-1.png">
          </div> -->
          <social-sharing :url="herfurl"
                          :title="detailData.detail.title"
                          :description="detailData.detail.note"
                          :quote="detailData.detail.note"
                          twitter-user="vuejs" inline-template>
            <div class="article-detail-share pc-bk">
                <div id="qrcode">
                  <img :src="imgurltext" id="imgurl">
                  
                  <canvas id="canvas"></canvas>
                </div>
                <network network="whatsapp" class="art-share">
                  <i class="fa fa-whatsapp"></i><img src="../../img/mobile/wxshare.png">{{imgurltext}}
                </network>
                <network network="weibo" class="art-share">
                  <i class="fa fa-weibo"></i><img src="../../img/mobile/wbshare.png">
                </network> 
                <network network="facebook" class="art-share">
                  <i class="fa fa-facebook"></i> <img src="../../img/mobile/fshare.png">
                </network>
                <network network="twitter" class="art-share">
                  <i class="fa fa-twitter"></i> <img src="../../img/mobile/twshare.png">
                </network>
            </div>
          </social-sharing>
        </div>
      </div>
      <div class="no-content" style="height: 600px;" v-bind:class="{'scroll':scrolldetail === 1}"  v-else>
        <div class="nosearch" v-if="!loading">
          <img src="../../img/mobile/emptycontent.jpeg" alt="">
        </div>
        <!-- 空空如也！ -->
      </div>
      <div class="right-rcmd" v-if="author_info === ''" ref="rightnav" v-bind:class="{'scroll':scrolldetail === 1, 'fbottom':fixedbottom1 === 1}">
        <div v-for="(ads, index) in ads">
          <div v-if="index === 0" class="topimg" :style="{backgroundImage:'url(' + ads.img + ')'}" @click="adsLink" :data-link="ads.link">
          </div>
          <div v-if="index === 1" class="bottomimg" :style="{backgroundImage:'url(' + ads.img + ')'}" @click="adsLink" :data-link="ads.link">
          </div>
        </div>
       <!--  <div class="topimg" style="background-image:url(http://forumapi.iff.org.cn/upload/backend/news/cover/1531150607.jpeg)">
        </div>
        <div class="bottomimg" style="background-image:url(http://forumapi.iff.org.cn/upload/backend/news/cover/1531150607.jpeg)">
        </div> -->
      </div>
      <div class="right-rcmd-author" v-bind:class="{'scroll':scrolldetail === 1, 'fbottom':fixedbottom === 1}" v-else>
        <div class="author-info">
          <div class="rcmd-author-header" @click="linkAuthor" :data-id="author_info[0].id">
            <span :style="{backgroundImage:'url(' + author_info[0].cover_path + ')'}" ></span>
            <div class="rcmd-author-name">
              {{author_info[0].title}}
            </div>
            <div class="rcmd-author-info">
              {{author_info[0].job}}
            </div>
          </div>
        </div>
        <div class="rcmd-author-article">
          <div class="agendalist" @click="linkDetail" v-for="(recommend_list,dataindex) in detailData.recommend"  :data-id="recommend_list.id" v-if="dataindex === 0" >
            <div class="agenda-img" :style="{backgroundImage:'url(' +recommend_list.cover_path + ')'}"></div>
            <div class="agenda-title hy">
              {{recommend_list.title}}
            </div>
            <div class="agenda-article-info"
                 style="/* autoprefixer: off*/
                        -webkit-box-orient: vertical;
                        /* autoprefixer: on*/">
              {{recommend_list.note}}
            </div>
            <div class="article-share-icon">
              <img src="../../img/mobile/at-share-icon.png">
            </div>
          </div>
        </div>
      </div>
      <div class="recommend-block" style="display: none;" v-if="detailData.recommend.length!=0">
        <div class="recommend-title mobile-top">
          <img src="../../img/mobile/line.png" alt="">
          相关推荐
          <img src="../../img/mobile/line.png" alt="">
        </div>
        <div class="recommend-note pc-bk">
          相关推荐
        </div>
        <div class="recommend-list vd-recommend-list mobile-top" v-if="detailData.detail.type ===1"><!--视频-->
          <div class="recom-vd-list">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide v-for="recommend_list in detailData.recommend">
                <div class="vd-link" @click="linkDetail" :data-id="recommend_list.id">
                  <div class="vd-cover-img" :style="{backgroundImage:'url(' + recommend_list.cover_path + ')'}"></div>
                 <div class="vd-title">{{recommend_list.title}}</div>
                  <div class="vd-icon"><img src="../../img/mobile/video-icon.png" alt=""></div>
                  <div class="content-info list-info">
                   {{recommend_list.author}} {{recommend_list.publish_time}}
                  </div>
                </div>
              </swiper-slide>
           </swiper>
          </div>
        </div>
        <div class="recommend-list mobile-top" v-else><!--新闻-->
          <div class="content-list"  @click="linkDetail" v-for="recommend_list in detailData.recommend"  :data-id="recommend_list.id">
           <div class="pc-right-line">
              <div class="left-img" :style="{backgroundImage:'url(' + recommend_list.cover_path + ')'}"></div>
            </div>
            <div class="right-text">
              <div class="right-content-text">
              {{recommend_list.title}}
              </div>
              <div class="content-info list-info">
                   {{recommend_list.author}} {{recommend_list.publish_time}}
                  </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="recommed-main pc-bk">
          <div class="recommend-list-pc recommend-left">
            <div class="recommend-list-ele" @click="linkDetail" :data-id="recommend_list.id" v-for="(recommend_list, index) in detailData.recommend"
            v-if="index < 3">
              <div class="recommend-img" :style="{backgroundImage:'url(' + recommend_list.cover_path + ')'}">
                  <div class="vd-icon"  v-if="detailData.detail.type ===1"><img src="../../img/mobile/video-icon.png" alt=""></div>
              </div>
              <div class="recommend-ele-info">
                <div class="recommend-ele-title">{{recommend_list.title}}</div>
                <div class="recommend-ele-time">
                  <span class="info-second-name">{{recommend_list.second_level_cname}}</span>
                  <span class="info-time">{{recommend_list.publish_time}}</span>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="recommend-list-pc recommend-right">
            <div class="attention-us">
              关注我们
            </div>
            <div class="share-icon-list">
              <span>
                <img src="../../img/mobile/xl.png">
              </span>
              <span>
                <img src="../../img/mobile/wx.png">
              </span>
              <span>
                <img src="../../img/mobile/fc.png">
              </span>
              <span>
                <img src="../../img/mobile/tw.png">
              </span>
            </div>
            <div class="right-recommend-list">
              <ul>
                <li v-for="(recommend_list, index) in detailData.recommend"
            v-if="index > 2" @click="linkDetail" :data-id="recommend_list.id">
                  <div class="right-recommend-title">
                    {{recommend_list.title}}
                  </div>
                  <div class="recommend-ele-time right-ele-time">
                    <span class="info-second-name">{{recommend_list.second_level_cname}}</span>
                    <span class="info-time">{{recommend_list.publish_time}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="to-top pc-top" @click="ToTop" v-if="totop">
      <img src="../../img/mobile/totop.png">
    </div>
    <div class="footer-operation mobile-top">
      <span class="left-back" @click="backClick">
        <img src="../../img/mobile/back.png" alt="">
      </span>
      <div class="right-block-icon">
        <span class="zan-icon" v-if="agree_status == 0" @click="agreeArticle('agree')">
          <img src="../../img/mobile/zan.png" alt="">
        </span>
        <span class="zan-icon" v-else @click="agreeArticle('disagree')">
          <img src="../../img/mobile/zanactive.png" alt="">
        </span>
        <!--<span class="share-icon" @click="shareClick">-->
        <!--<img src="../../img/mobile/share.png" alt="">-->
        <!--</span>-->
      </div>
    </div>
    <footernav></footernav>
    <!--<div class="share-block" v-if="showshare" @click="closeShare">-->
      <!--&lt;!&ndash;<img src="../../img/mobile/share-icon.png">&ndash;&gt;-->
      <!--<img src="../../img/mobile/sharetest.jpg" alt="">-->
    <!--</div>-->
  </div>
</template>
<script>
  import QRCode from 'qrcode'
  import api from '../../utils/api'
  import apiConfig from '../../utils/apiconfig.js'
  import helper from '../../utils/helper'
  import loading from '../../components/loading'
  import { Toast, Indicator } from 'mint-ui'
  import { videoPlayer } from 'vue-video-player'
  import videojs from 'video.js'
  import navblock from './components/nav'
  import searchtab from './components/searchtab'
  import searchlist from './components/search'
  import footernav from './components/footernav'
  import loginpop from './components/login'
  export default {
    data () {
      return {
        showlogin: false,
        imgurltext: '',
        herfurl: '',
        logintoken: '',
        first_level_cid: 0,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        applicationType: [
          {
            key: '1',
            value: '战略伙伴'
          },
          {
            key: '2',
            value: '基金会员'
          },
          {
            key: '3',
            value: '论坛会员'
          }
        ],
        signup: true,
        author_info: '',
        searchtext: '',
        tablist: [],
        showsearchlist: false,
        showsearch: false,
        swiperOption: {
          slidesPerView: 2.5,
          spaceBetween: 10,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          initialSlide: 0
        },
        articletype: 0,
        showshare: false,
        isActive: true,
        detailData: {},
        newsid: '',
        agree_status: true,
        playerOptions: {
          autoplay: false,
          muted: false,
          loop: false,
          preload: 'auto',
          language: 'zh-CN',
          aspectRatio: '16:9',
          fluid: true,
          sources: [{
            type: 'video/mp4',
            src: ''
          }],
          poster: '',
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试'
        },
        totop: false,
        scrolldetail: 0,
        fixedbottom: 0,
        fixedbottom1: 0,
        othertype: '',
        cid: '',
        tid: '',
        tcid: 0,
        sbjid: 0,
        likenew: 1
      }
    },
    beforeCreate(){
      var metaEl = document.getElementsByTagName("meta")
      metaEl[3]['content'] = "";
    },
    created () {
      this.herfurl = window.location.href
      this.logintoken = localStorage.token
      this.newsid = this.$route.query.id
      if (this.$route.query.type) {
        this.othertype = this.$route.query.type
      }
      if (this.$route.query.cid) {
        this.cid = this.$route.query.cid
      }
      if (this.$route.query.listid) {
        this.tid = this.$route.query.listid
      }
      console.log(this.$route.query.tcid)
      if (this.$route.query.tcid) {
        this.tcid = this.$route.query.tcid
      }
      this.getDetail(this.newsid, this.tcid, this.tid)
      // var mydata = sessionStorage.checktab
      // this.getTablist(mydata)
    },
    components: {
      loading,
      videoPlayer,
      navblock,
      searchtab,
      searchlist,
      footernav,
      QRCode,
      loginpop
    },
    mounted () {
      window.addEventListener('scroll', this.paperScroll)
      window.addEventListener('scroll', this.handleScroll)
      this.useqrcode()
    },
    methods: {
      hasLike (id) {
        var that = this
        if (!that.logintoken) {
          that.showlogin = true
          return false
        }
        var param = {
          ids: that.detailData.detail.id,
          token: that.logintoken
        }
        Indicator.open('加载中...')
        that.params = param
        console.log(param)
        api.GET(helper.getClientApiUrl(apiConfig.web.delfavourite), this.params, res => {
          this.likenew = 0
          Toast({
            message: '取消收藏',
            iconClass: 'icon icon-success'
          })
          Indicator.close()
        }, res => {
          Indicator.close()
        })
      },
      useqrcode(){
        QRCode.toDataURL('222', {errorCorrectionLevel: 'H'}, function (err, url) {
        this.imgurltext = url
          // document.getElementById('imgurl').src = url;
        })
      },
      loginbloock (val) {
        this.showlogin = val
      },
      likeNews () {
        if (!this.logintoken) {
          this.showlogin = true
          return false
        }
        var param = {
          token: this.logintoken,
          item_id: this.detailData.detail.id,
          item_type: 'NEWS'
        }
        Indicator.open('加载中...')
        this.params = param
        api.GET(helper.getClientApiUrl(apiConfig.web.linkurl), this.params, res => {
          this.likenew = 1
          Toast({
            message: '收藏成功',
            iconClass: 'icon icon-success'
          })
          console.log(this.likenew)
          Indicator.close()
        })
      },
      onSubmit () {
        console.log('submit!')
      },
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop >= 100) {
          this.scrolldetail = 1
        } else {
          this.scrolldetail = 0
        }
        var leftnav = this.$refs.leftnav.clientHeight
        var rightnav = this.$refs.rightnav.clientHeight
        var scrollbottom = document.documentElement.scrollHeight - scrollTop - leftnav
        var scrollbottom1 = document.documentElement.scrollHeight - scrollTop - rightnav
        if (scrollbottom <= 270) {
          this.fixedbottom = 1
        } else {
          this.fixedbottom = 0
        }
        if (scrollbottom1 <= 270) {
          this.fixedbottom1 = 1
        } else {
          this.fixedbottom1 = 0
        }
      },
      searchBtn1 () {
        this.showsearchlist = true
      },
      opensearch (val) {
        console.log('test:' + val)
        this.showsearch = val
      },
      searchlink (val) {
        console.log('testsss:' + val)
        this.showsearchlist = val
      },
      searchcan (val) {
        this.showsearchlist = val
      },
      paperScroll () {
        var thistop = document.documentElement.scrollTop || document.body.scrollTop
        if (thistop > 10) {
          this.totop = true
        } else {
          this.totop = false
        }
      },
      // ToTop () {
      //   var gotoTop = function () {
      //     var currentPosition = document.documentElement.scrollTop || document.body.scrollTop
      //     currentPosition -= 20
      //     if (currentPosition > 0) {
      //       window.scrollTo(0, currentPosition)
      //     } else {
      //       window.scrollTo(0, 0)
      //       clearInterval(timer)
      //       timer = null
      //     }
      //   }
      //   var timer = setInterval(gotoTop, 1)
      // },
      ToTop () {
        window.scrollTo(0, 0)
      },
      playerReadied (player) {
        const track = new videojs.AudioTrack({
          id: 'my-spanish-audio-track',
          kind: 'translation',
          label: 'Spanish',
          language: 'es'
        })
        player.audioTracks().addTrack(track)
        // Get the current player's AudioTrackList object.
        const audioTrackList = player.audioTracks()
        // Listen to the "change" event.
        audioTrackList.addEventListener('change', function () {
          // Log the currently enabled AudioTrack label.
          for (let i = 0; i < audioTrackList.length; i++) {
            const track = audioTrackList[i]
            if (track.enabled) {
              videojs.log(track.label)
              return
            }
          }
        })
      },
      linkDetail (e) {
        this.$router.replace('/home/detail?id=' + e.currentTarget.dataset.id)
        window.location.reload()
      },
      linkAuthor (e) {
        console.log(e.currentTarget.dataset.id)
        this.$router.push('/home/authordetail?id=' + e.currentTarget.dataset.id)
      },
      adsLink (e) {
        window.location.href = e.currentTarget.dataset.link
        // window.location.reload()
      },
      lookMore () {
        this.isActive = false
      },
      backClick () {
        this.$router.go(-1)
      },
      shareClick () {
        this.showshare = true
      },
      closeShare () {
        this.showshare = false
      },
      getDetail (newsid, tcid, sourceId) {
        var param = {
          id: newsid,
          cid: tcid,
          source_id: sourceId,
          token: this.logintoken
        }
        console.log(param)
        Indicator.open('加载中...')
        this.params = param
        api.GET(helper.getClientApiUrl(apiConfig.web.getDetail), this.params, res => {
          if (res.detail.title) {
            document.title = res.detail.title + '-国际金融论坛'
          }else {
            document.title = res.nav_title + '-国际金融论坛'
          }
          this.detailData = res
          this.sbjid = res.subject_id
          this.likenew = res.favourite_status
          this.ads = res.ads
          this.tablist = res.nav
          this.playerOptions.sources[0].src = res.detail.video_url
          this.playerOptions.poster = res.detail.cover_path
          this.articletype = res.detail.type
          this.agree_status = res.detail.agree_status
          this.loading = false
          if (res.author_info === undefined || res.author_info === '' || res.author_info.length === 0
) {
            this.author_info = ''
          } else {
            this.author_info = res.author_info
          }
          console.log(this.author_info)
          Indicator.close()
        }, res => {
          console.log(res)
          Indicator.close()
        })
      },
      agreeArticle (ele) {
        var param = {
          news_id: this.newsid,
          news_type: this.detailData.detail.type,
          agree_type: ele
        }
        this.params = param
        console.log(param)
        api.GET(helper.getClientApiUrl(apiConfig.web.agreeurl), this.params, res => {
          if (this.agree_status === 0) {
            Toast({
              message: '点赞成功',
              iconClass: 'icon icon-success'
            })
          } else {
            Toast({
              message: '取消点赞成功',
              iconClass: 'icon icon-success'
            })
          }
          this.getDetail(this.newsid, this.tcid)
        }, res => {
          Toast({
            message: '点赞失败',
            iconClass: 'icon icon-fail'
          })
          console.log(res)
        })
      },
      moreBtn (e) {
        let contid = e.currentTarget.dataset.id
        let conttype = e.currentTarget.dataset.type
        let itid = e.currentTarget.dataset.itid
        let authorlen = 0
        if (this.detailData.detail.author_info) {
          authorlen = this.detailData.detail.author_info.length
        }
        if (conttype === 'AUTHOR' || authorlen > 0) {
          this.$router.push('/home/authorlist?id=' + contid + '&sbjid=' + this.sbjid)
        } else if (conttype === 'news_detail') {
          this.$router.push('/home/detail?id=' + e.currentTarget.dataset.itid)
          this.tcid = 0
          this.getDetail(itid, this.tcid)
        } else if (conttype === 'DOWNLOAD') {
          this.$router.push('/home/downlist?id=' + e.currentTarget.dataset.itid)
          // this.tcid = 0
          // this.getDetail(itid, this.tcid)
        } else {
          this.$router.push('/home/list?id=' + e.currentTarget.dataset.id + '&sbjid=' + this.sbjid)
        }
      },
      tomoreList (e) {
        let conttype = e.currentTarget.dataset.type
        let contid = e.currentTarget.dataset.id
        let contcid = e.currentTarget.dataset.cid
        let itid = e.currentTarget.dataset.itid
        if (conttype === 'source') {
          this.$router.push('/home/ifflist?id=' + contid + '&cid=' + contcid + '&sbjid=' + this.sbjid)
        } else if (conttype === 'news_detail') {
          this.getDetail(itid, e.currentTarget.dataset.tcid)
          this.$router.push('/home/detail?id=' + e.currentTarget.dataset.itid + '&tcid=' + e.currentTarget.dataset.tcid)
          this.tcid = e.currentTarget.dataset.tcid
        } else if (conttype === 'news') {
          this.getDatalist(contid, 1)
          this.$router.push('/home/list?id=' + contid + '&sbjid=' + this.sbjid)
        }
      },
      tootherList (e) {
        let tid = e.currentTarget.dataset.tid
        let contcid = e.currentTarget.dataset.cid
        console.log(this.othertype)
        if (this.othertype === 'author') {
          this.$router.push('/home/authorlist?id=' + contcid + '&sbjid=' + this.sbjid)
        } else if (this.othertype === 'iff') {
          this.$router.push('/home/ifflist?id=' + tid + '&cid=' + contcid + '&sbjid=' + this.sbjid)
        }
      },
      toIndex (e) {
        let id = e.currentTarget.dataset.id
        this.checktab = parseInt(id) - 1
        sessionStorage.setItem('checktab', this.checktab)
        this.$router.push('/home')
      },
      selectab (val) {
        if (val.currentTarget.dataset.id !== 'TOP') {
          this.checktab = parseInt(val.currentTarget.dataset.id) - 1
        } else {
          this.checktab = this.tablist.length - 1
        }
        sessionStorage.setItem('checktab', this.checktab)
        this.$router.push('/home')
      },
      toTopic (e) {
        this.$router.push('/home/conferencetopics?id=' + e.currentTarget.dataset.id)
      }
    },
    computed: {
      player () {
        return this.$refs.videoPlayer.player
      }
    }
  }
</script>
<style>
  .content-info{
    font-size: 13px;
    color: #4e6e6d;
    margin-top: 10px;
  }
  .content-info.info-detail{
    text-align: left;
  }
  .content-list{
    padding: 15px 0;
  }
  .footer-copyright div{
    text-align: center;
  }
  .news-title{
    font-size: 23px;
  }
  .news-detail-header{
    padding: 10px 15px;
    border-bottom: 1px solid #efefef;
  }
  .news-detail-content{
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a;
    padding: 10px 15px;
  }
  .news-video-content{
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a;
    padding: 10px 0 0 0;
  }
  .news-detail-content .showmore{
    max-height: 560px;
    overflow: hidden;
  }
  .news-detail-content img{
    margin: 10px 0;
    max-width: 100%;
  }
  .see-more-btn{
    text-align: center;
  }
  .see-more-btn span{
    height: 30px;
    line-height: 30px;
    display: inline-block;
    padding: 0 25px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    color: #9b9b9b;
    border:1px solid #9b9b9b;
    margin: 20px 0;
  }
  .recommend-title{
    font-size: 15px;
    text-align: center;
    margin: 20px 0 30px 0;
  }
  .recommend-title img{
    width: 15px;
    vertical-align: super;
    position: relative;
    top: 3px;
  }
  .recommend-list{
    padding: 0 15px;
  }
  .recommend-list.vd-recommend-list{
    padding: 0;
  }
  .right-block-icon{
    float: right;
  }
  .zan-icon,.share-icon{
    padding-right: 20px;
  }
  .top-content-block{
    padding-bottom: 50px;
  }
  .share-block{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0, 0, 0, 0.35);
  }
  .share-block img{
    /*position: absolute;*/
    /*right: 25px;*/
    /*top: 10px;*/
    width: 100%;
    height: 100%;
  }
  .vd-cover-img{
    width: 100%;
    height:21vw;
    background-size: cover;
    background-position: center;
  }
  .vd-icon img{
    width: 30%;
    position: relative;
    top:15%;
  }
  .vd-icon{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
  .vd-link{
    position: relative;
  }
  .vd-title{
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    width: 100%;
    height: 25px;
    line-height:25px;
    color: #fff;
    text-align: center;
    font-size: 12px;
  }
  /*@media screen and (min-width: 1200px) {*/
    .breadcrumb-ele,.breadcrumb-ele-righticon{
      color: #4e6e6d;
      font-size: 17px;
      font-weight: bold;
    }
    .breadcrumb-ele-title{
      color: #9b9b9b;
      font-size: 17px;
      font-weight: 700;
    }
    .breadcrumb-bk span{
      cursor: pointer;
    }
    .breadcrumb-bk{
      padding: 20px 15px 10px 15px;
      width: 1200px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .see-more-btn span{
      font-size: 15px;
    }
    .news-detail-content{
      padding: 15px 0 0 0;
      line-height: 2;
      font-size: 16px;
    }
    .news-detail-header{
      padding: 0;
      border:0;
    }
    .recommend-title{
      font-size: 17px;
    }
    .recommend-title img{
      top: 2px;
    }
    .news-title{
      font-size: 30px;
      padding: 16px 0 10px 0;
      font-weight: bold;
      color: #4C4948;
      text-align: left;
    }
    .recommend-block{
      width: 1200px;
      margin: 0 auto;
      padding:0 20px;
      box-sizing: border-box;
    }
    .top-center{
      text-align: center;
    }
    .learn-all{
      margin: 0;
    }
    .news-body{
      margin-top: 20px;
      width: 625px;
      display: inline-block;
    }
    .news-content{
      width: 625px;
      display: inline-block;
    }
    .recommend-list-pc{
      width: 1200px;
      margin: 0 auto;
    }
    .share-block{
      display: none;
    }
    .vd-cover-img{
      height: 180px;
    }
    .vd-title{
      height: 40px;
      line-height: 40px;
      font-size: 15px;
    }
    .vd-icon img{
      width: 70px;
      top: 25%;
    }
    .content-info.info-detail{
      font-size: 14px;
      color: #858585;
    }
    .share-detail{
      float: right;
      display: inline-block;
    }
    /*.share-detail img{*/
      /*width: 20px;*/
    /*}*/
    .right-rcmd{
      width: 230px;
      float: right;
      display: inline-block;
      margin-top: 20px;
    }
    .right-rcmd .topimg{
      cursor: pointer;
      width: 230px;
      height: 390px;
      background-size: cover;
      background-position: center;
    }
    .right-rcmd .bottomimg{
      cursor: pointer;
      margin-top: 10px;
      width: 230px;
      height: 150px;
      background-size: cover;
      background-position: center;
    }
    .article-detail-share{
      padding-top: 40px;
      width: 625px;
      margin: 0 auto;
      text-align: right;
    }
    .article-detail-share image{
      margin-top: 30px;
    }
  /*}*/
</style>
